<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成工具</title>
    <script src="vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element.css">
    <!-- 引入组件库 -->
    <script src="element.js"></script>
    <!--引入axios-->
    <script src="axios.js"></script>

</head>
<body>
<div id="app">
     <table>
        <tr>
            <td>
                <el-tag size="mini">数据库用户名：</el-tag>
            </td>
            <td>
                <el-input size="mini" v-model="db.username"></el-input>
            </td>
        </tr>
        <tr>
            <td>
                <el-tag size="mini">数据库密码：</el-tag>
            </td>
            <td>
                <el-input size="mini" v-model="db.password"></el-input>
            </td>
        </tr>
        <tr>
            <td>
                <el-tag size="mini">数据库连接地址：</el-tag>
            </td>
            <td>
                <el-input size="mini" v-model="db.url">
                    <template slot="prepend">jdbc:mysql://</template>
                    <template slot="append">
                        ?useUnicode=true&autoReconnect=true&characterEncoding=utf-8&useInformationSchema=true&allowMultiQueries=true&useSSL=false&serverTimezone=Asia/Shanghai
                    </template>
                </el-input>
            </td>
        </tr>
    </table>
    <div style="display:flex">
        <el-button type="primary" :disabled="!connectBtn" @click="connect" size="mini">
            连接数据库
        </el-button>
        <el-tag size="mini" type="danger">{{msg}}</el-tag>
        <el-input v-model="packageName" size="mini" style="width: 300px"></el-input>
        <el-button type="primary" :disabled="!configBtn" size="mini" @click="config">配置</el-button>
    </div>

    <el-checkbox v-model="enableLombok">开启Lombok</el-checkbox>
    <el-checkbox v-model="enableSwagger">开启Swagger</el-checkbox>
    <el-checkbox v-model="enableMybatisplus">开启Mybatisplus</el-checkbox>
    <el-checkbox v-model="enableCustomAnnotation">开启自定义注解</el-checkbox>

    </br>
    </br>
    <div>
        <el-button v-show="generateCodeBtn" @click="generateCode" type="success">生成代码</el-button>
        <div>{{codePath}}</div>
    </div>
    <el-table
            :data="tableData.filter(data => !search || data.tableName.toLowerCase().includes(search.toLowerCase()))"

            stripe
            border
            ref="multipleTable"
            style="width: 100%">

        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column

                prop="tableName"
                label="表名称"
                width="180">
            <template slot="header" slot-scope="scope">
                表名称：   <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>

            </template>
        </el-table-column>
        <el-table-column
                label="实体类名称"
                width="180">
            <template slot-scope="scope">
                <el-input v-model="scope.row.modelName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="Mapper名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.mapperName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="Service名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.serviceName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="ServiceImpl名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.serviceImplName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="Controller名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.controllerName"></el-input>
            </template>
        </el-table-column>
    </el-table>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                generateCodeBtn: false,
                codePath: '',
                packageName: 'com.sp',
                msg: "数据库未连接",
                connectBtn: true,
                configBtn: false,
                enableLombok:true,
                enableSwagger:true,
                enableMybatisplus:true,
                enableCustomAnnotation:true,
                db: {
                    username: "service",
                    password: "##56567",
                    url: "192.168.1.103:3306/service"
                },
                search:""
            }
        },

        methods: {
            generateCode() {
                var selection = this.$refs.multipleTable.selection;

                axios.post('/generateCode', selection)
                    .then(res => {
                        this.codePath = res.data.obj;
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    })
                    .catch(error => {
                        this.$message.error(error.data.msg);
                    });
            },
            config() {

                axios.post('/config', {
                    packageName: this.packageName,
                    enableLombok: this.enableLombok,
                    enableSwagger: this.enableSwagger,
                    enableMybatisplus: this.enableMybatisplus,
                    enableCustomAnnotation:this.enableCustomAnnotation
                })
                    .then(res => {
                        this.msg = res.data.msg;
                        this.tableData = res.data.obj;
                        this.generateCodeBtn = true;
                        this.$nextTick(function () {

                            this.$refs.multipleTable.toggleAllSelection();
                        })
                    })
                    .catch((error) => {
                        this.$message.error(error.data.msg);
                    });
            },
            connect() {
                this.db.url = "jdbc:mysql://" + this.db.url + "?useUnicode=true&autoReconnect=true&useInformationSchema=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=Asia/Shanghai"
                axios.post('/connect', this.db)
                    .then(res => {
                        this.msg = res.data.msg
                        this.$message({
                            message: this.msg,
                            type: 'success'
                        });
                        this.connectBtn = false
                        this.configBtn = true
                        this.db = {
                            username: "service",
                            password: "##56567",
                            url: "192.168.1.103:3306/service"
                        }
                    })
                    .catch(error => {
                        this.$message.error(error.data.msg);
                    });
            }
        }
    })
</script>
</html>